<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../css/element-plus.index.css">
    <script type="text/javascript" src="../js/vue.global.3.2.39.js"></script>
    <script type="text/javascript" src="../js/element-plus.2.2.15.js"></script>
    <script type="text/javascript" src="../js/element_plus_icons.2.0.9.js"></script>
    <script type="text/javascript" src="../js/axios.min.0.24.0.js"></script>
</head>
<body>
<div id="app">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>类别列表</el-breadcrumb-item>
    </el-breadcrumb>
    <hr>
    <el-row>
        <el-col :span="12">
            <h3>类别列表</h3>
            <el-table ref="tbCatList" :data="catList" border stripe>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column label="类别名称" prop="catName" width="100"></el-table-column>
                <el-table-column label="类别描述" prop="catDesc" width="180"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" type="danger" @click="deleteCategory(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <br>
            <el-button type="danger" @click="batchDelete">批量删除</el-button>
        </el-col>
        <el-col :span="8">
            <h3>录入新类别</h3>
            <el-form label-width="120px" ref="inputForm" :model="category" :rules="formRule">
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="类别名称:" prop="catName">
                            <el-input v-model="category.catName" maxlength="10"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="类别描述:" prop="catDesc">
                            <el-input v-model="category.catDesc" maxlength="100"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item>
                            <el-button type="primary" @click="handleAddCategory">录入</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
        </el-col>
    </el-row>
</div>
<script src="../js/common.js"></script>
<script type="text/javascript">
    const options = {
        data() {
            return {
                //所有类别的列表
                catList: [],
                //存储输入的新类别信息的对象
                category: {
                    catName: '',
                    catDesc: ''
                },
                //校验规则
                formRule: {
                    catName: [
                        {required: true, message: '请输入类别名称!', trigger: 'blur'},
                        {validator: this.checkCatName, trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            //提交表单
            handleAddCategory() {
                let _this = this;
                this.$refs['inputForm'].validate(valid => {
                    if (valid) {
                        //发送AJAX请求
                        axios.post('/cat/add', this.category).then(resp => {
                            if (resp) {
                                ElementPlus.ElMessage({
                                    type: 'success',
                                    message: '录入成功!'
                                });
                                //清空表单
                                //_this.category.catName=_this.category.catDesc='';
                                _this.$refs['inputForm'].resetFields();
                                //重新载入类别列表
                                _this.loadCategoryList();
                            } else {
                                ElementPlus.ElMessage({
                                    type: 'error',
                                    message: '系统故障，请稍后重试!'
                                });
                            }
                        });
                    }
                });
            },
            //校验类别名称是否合法
            checkCatName(rule, value, callback) {
                //发送AJAX请求
                axios.post('/cat/checkCatName', 'catName=' + value).then(resp => {
                    if (resp) {
                        callback();
                    } else {
                        callback(new Error("该类别名称已经存在!"));
                    }
                });
            },
            //载入类别列表
            loadCategoryList() {
                axios.get('/cat/list').then(resp => {
                    this.catList = resp;
                });
            },
            //批量删除
            batchDelete() {
                //获取要删除的类别的编号
                let arr = this.$refs['tbCatList'].getSelectionRows();
                if (arr.length == 0) {
                    ElementPlus.ElMessage({
                        type: 'warning',
                        message: '请选择要删除的类别!'
                    });
                    return;
                }
                //确认删除
                ElementPlus.ElMessageBox.confirm('你真的要删除这些类别吗?', '确认删除').then(() => {
                    //拼接参数:catId=10&catId=23&catId=88
                    let data = '';
                    for (let i = 0; i < arr.length; i++) {
                        if (data.length > 0) data += '&';
                        data += ('catId=' + arr[i].catId);
                    }
                    axios.post('/cat/delete', data).then(resp => {
                        ElementPlus.ElMessage({
                            type: 'success',
                            message: '删除了' + resp + "个类别!"
                        });
                        this.loadCategoryList();
                    });
                }).catch(() => {
                });
            },
            //删除单个类别
            deleteCategory(category) {
                ElementPlus.ElMessageBox.confirm('你真的要删除【' + category.catName + "】这个类别吗?", '确认删除')
                    .then(() => {
                        //发送ajax请求
                        axios.post('/cat/delete', 'catId=' + category.catId).then(resp => {
                            ElementPlus.ElMessage({
                                type: 'success',
                                message: '删除了' + resp + "个类别!"
                            });
                            this.loadCategoryList();
                        });
                    })
                    .catch(() => {
                    });
            }
        },
        created() {
            this.loadCategoryList();
        }
    };
    const app = Vue.createApp(options);
    app.use(ElementPlus);
    for (const [iconName, iconComp] of Object.entries(ElementPlusIconsVue)) {
        if (iconName == 'Menu') {
            app.component('IconMenu', iconComp);
        } else {
            app.component(iconName, iconComp);
        }
    }
    const vm = app.mount("#app");
</script>
</body>
</html>